<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/CustomMVC/">
    <meta charset="UTF-8">
    <title>axios的页面</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/qs.min.js"></script>
    <script src="js/axios.min.js" type="text/javascript"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #cccccc;
        }
        /*#app{*/
        /*    text-align: center;*/
        /*}*/
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <img v-bind:src="imgUrl" v-bind:height="height" v-show="flag" @click="openFileSelect">
        <input type="text" placeholder="请输入账户名" v-model="account"> <input type="text" placeholder="请输入用户名" v-model="name">
        <input type="button"value="查询" @click="queryUser">
        <table border="1px" width="50%" style="margin: 10px">
            <tr><th>ID</th><th>账户</th><th>姓名</th></tr>
            <tr v-for="(user,index) in users">
                <td>{{index}}</td>
                <td>{{user.account}}</td>
                <td v-if="user.ud!=null">{{user.ud.name}}</td>
                <td v-else></td>
            </tr>
        </table>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                msg:"Axios页面",
                users:[],
                account:"",
                name:"",
                imgUrl:"img/羊01.jpg",
                height:"200px",
                flag:true,

            },
            methods: {
                queryUser: function () {
                    // axios.get("queryAllUser",{
                    //     params:{
                    //         account: this.account,
                    //         name: this.name,
                    //     }
                    // }).then(result=>{
                    //     this.users = result.data;
                    // })
                    axios.post("queryAllUser", {
                        account: this.account,
                        name: this.name,
                    }, {
                        transformRequest: [function (data) {
                            // 对 data 进行JSON转换处理，data对象转为字符串形式
                            return Qs.stringify(data);
                        }]
                    }).then(result => {
                        this.users = result.data;
                    })
                },
                openFileSelect(){
                    //创建一个动态的文件选择框（multiple表示可以多选）
                    $("<input type=\"file\" onchange=\"vm.uploadImg(this)\" multiple>").click();
                    // this.fileSelect_show = true;
                },
                uploadImg(obj){
                    //FormData对象可以近似看成js动态创建的表单
                    let formdata = new FormData()
                    formdata.append("file", obj.files[0])  //将图片加进formdata
                    axios.post("imgUpload", formdata).then(res => {
                        this.imgUrl = res.data;
                    })
                }
            },
            //页面加载完执行
            mounted:function (){
                // axios.get("queryAllUser").then(result=>{
                //     this.users = result.data;
                // })
            }
        })
    </script>
</body>
</html>